<template>
  <el-dialog
    :model-value="dialogFormVisible"
    :destroy-on-close="true"
    title="商户费用配置"
    width="780px"
    @close="
      () => {
        cardType = '';
        emits('closeDialog');
      }
    "
  >
    <el-form
      ref="dialogFormRef"
      :model="dialogForm"
      :label-width="formLabelWidth"
      :rules="rules"
    >
      <el-form-item label="商户" prop="merchant_id">
        <el-select
          clearable
          v-model="dialogForm.merchant_id"
          placeholder="商户"
          filterable
          style="width: 100%"
        >
          <el-option
            v-for="item in payMerchantList"
            :key="item.value"
            :label="item.name + '-' + item.merchant_id"
            :value="item.merchant_id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开卡费率" prop="card_rate">
        <el-input v-model="dialogForm.card_rate" type="number"><template #append>%</template></el-input>
      </el-form-item>
      <el-form-item label="开卡固定费用(单笔)" prop="card_rate">
        <el-input v-model="dialogForm.card_fee" type="number" />
      </el-form-item>
      <el-form-item label="退款费率" prop="refund_fee_rate">
        <el-input v-model="dialogForm.refund_fee_rate" type="number"><template #append>%</template></el-input>
      </el-form-item>
      <el-form-item label="退款固定费用(单笔)" prop="refund_fee">
        <el-input v-model="dialogForm.refund_fee" type="number" />
      </el-form-item>
      <el-form-item label="撤销固定费用(单笔)" prop="reversal_fee">
        <el-input v-model="dialogForm.reversal_fee" type="number" />
      </el-form-item>
      <el-form-item label="争议固定费用(单笔)" prop="dispute_fee">
        <el-input v-model="dialogForm.dispute_fee" type="number" />
      </el-form-item>
      <el-form-item label="拒付费率" prop="refuse_fee_rate">
        <el-input v-model="dialogForm.refuse_fee_rate" type="number"><template #append>%</template></el-input>
      </el-form-item>
      <el-form-item label="拒付最低费用" prop="refuse_min_fee">
        <el-input v-model="dialogForm.refuse_min_fee" type="number" />
      </el-form-item>
      <el-collapse>
        <el-collapse-item title="成本费用项配置" name="1">
      <el-form-item label="开卡费率" prop="card_rate">
        <el-input v-model="dialogForm.cost_card_rate" type="number">
            <template #prepend>成本</template>
            <template #append>%</template>
        </el-input>
      </el-form-item>
      <el-form-item label="开卡固定费用(单笔)" prop="cost_card_fee">
        <el-input v-model="dialogForm.cost_card_fee" type="number">
            <template #prepend>成本</template>
        </el-input>
      </el-form-item>
      <el-form-item label="退款费率" prop="cost_refund_fee_rate">
        <el-input v-model="dialogForm.cost_refund_fee_rate" type="number">
            <template #prepend>成本</template>
            <template #append>%</template>
        </el-input>
      </el-form-item>
      <el-form-item label="退款固定费用(单笔)" prop="cost_refund_fee">
        <el-input v-model="dialogForm.cost_refund_fee" type="number">
            <template #prepend>成本</template>
        </el-input>
      </el-form-item>
      <el-form-item label="撤销固定费用(单笔)" prop="cost_reversal_fee">
        <el-input v-model="dialogForm.cost_reversal_fee" type="number">
            <template #prepend>成本</template>
        </el-input>
      </el-form-item>
      <el-form-item label="争议固定费用(单笔)" prop="cost_dispute_fee">
        <el-input v-model="dialogForm.cost_dispute_fee" type="number">
            <template #prepend>成本</template>
        </el-input>
      </el-form-item>
      <el-form-item label="拒付费率" prop="cost_refuse_fee_rate">
        <el-input v-model="dialogForm.cost_refuse_fee_rate" type="number">
            <template #prepend>成本</template>
            <template #append>%</template>
        </el-input>
      </el-form-item>
      <el-form-item label="拒付最低费用" prop="cost_refuse_min_fee">
        <el-input v-model="dialogForm.cost_refuse_min_fee" type="number">
            <template #prepend>成本</template>
        </el-input>
      </el-form-item>
    </el-collapse-item>
    </el-collapse>
    <div>&nbsp;</div>
      <el-form-item label="备注" prop="description">
        <el-input
          v-model="dialogForm.description"
          type="textarea"
          :rows="3"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button
          type="primary"
          @click="submit(dialogForm)"
          :loading="btnLoading"
        >
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, computed } from "vue";
const dialogFormRef = ref(null);
import { GlobalStore } from "@/store";

const globalStore = GlobalStore();
const payMerchantList = computed(() => globalStore.payMerchantList);

import { cardsProductApi } from "@/api/payServerse/cards";

defineProps({
  dialogFormVisible: {
    type: Boolean,
    default: false,
  },
  dialogForm: {
    type: Object,
    default: {
      id: "",
      merchant_id: "",
      issuer_channel: "",
      card_rate: 0,
      card_fee: 0,
      refund_fee_rate: 0,
      refund_fee: 0,
      reversal_fee: 0,
      dispute_fee: 0,
      refuse_fee_rate: 0,
      refuse_min_fee: 0,
      cost_card_rate: 0,
      cost_card_fee: 0,
      cost_refund_fee_rate: 0,
      cost_refund_fee: 0,
      cost_reversal_fee: 0,
      cost_dispute_fee: 0,
      cost_refuse_fee_rate: 0,
      cost_refuse_min_fee: 0,
      description: "",
    },
  },
  btnLoading: {
    type: Boolean,
    default: false,
  },
  issueChannelData: { type: Object, default: [] },
  issueClientData: { type: Object, default: [] },
  cardConfigData: { type: Object, default: [] },
});
const emits = defineEmits([
  "closeDialog",
  "cancel",
  "submitForm",
  "cardTypeChange",
]);

const formLabelWidth = "200px";
// 校验
const rules = {
  merchant_id: [{ required: true, message: "请输入选择商户", trigger: "blur" }],
};

const cardType = ref("");

const cardTypeChange = (val) => {
  emits("cardTypeChange", val);
};

const cancel = () => {
  cardType.value = "";
  emits("cancel");
};

// 提交
const submit = (dialogForm) => {
  dialogFormRef.value
    .validate()
    .then(async () => {
      try {
        const param = Object.assign({}, dialogForm);
        cardType.value = "";
        if (!param.product_id) {
          param.product_id = 0;
        }
        emits("submitForm", param);
      } catch (error) {
        return false;
      }
    })
    .catch((error) => {
      return false;
    });
};

const cardsProductList = ref([]);

// const getCardsProduct = async () => {
//   const { data } = await cardsProductApi({ page: 1, pagesize: 9999, is_active: 1 });
//   cardsProductList.value = data.results || [];
// };

// getCardsProduct();
</script>
